<template>
	<gracePage statusBarBG="rgba(255,255,255,0)">
		<view slot="gHeader">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<button type="primary" class="grace-button grace-header-icons grace-icons icon-arrow-left grace-white grace-noborder" plain="true" @tap="goBack"></button>			
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex grace-h4 grace-bold grace-white grace-text-center" style="margin-left: -60rpx;">
					登录
				</view>
				<!-- 设置按钮 -->
				<view class="grace-white"></view>
			</view>
		</view>
		<view slot="gBody">
			<view class="grace-body">
				<view class="help-bg"></view>
				<view class="help-body">
					<view><text class="grace-h4 grace-white">欢迎来到***</text></view>
					<view class="grace-grids grace-flex-center grace-box-shadow" style="margin-top:50rpx;">
						<form @submit="login" class="grace-form" style="margin-top:100rpx;">
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-form-icon grace-icons icon-phone"></text>								
								<view class="grace-form-body">
									<input type="number" v-model="mobile" class="grace-form-input" name="mobile" placeholder="请输入手机号码" />
								</view>
							</view>
							<view class="grace-form-item" style="margin-left: 50rpx;">
								<text class="grace-form-icon grace-icons icon-weixin right"></text>
								<view class="grace-form-body">
									<input type="password" class="grace-form-input" v-model="password" name="password" placeholder="请输入密码" />
								</view>
							</view>
							<view class="grace-margin-top" style="margin-top: 50rpx;">
								<view style="text-align:right;padding-right: 30rpx;">
									<text class="grace-line-title-text" @tap="forgetpwd">忘记密码?</text>
								</view>								
								<button form-type="submit" type="primary" class="grace-button grace-border-radius grace-bg-red" style="width:70%;">
									登录 <text class="grace-icons icon-arrow-right"></text>
								</button>
								<button type="warn" class="grace-button grace-border-radius" plain="true" style="width:70%;margin-top: 20rpx;" @tap="reg">
									注册
								</button>
							</view>
						</form>												
					</view>					
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				mobile: '',
				password:''
			};
		},
		components: {
			gracePage,
		},
		onLoad: function(options) {
		},
		methods: {
			//退回
			goBack : function(){
				console.log('goBack');
			    uni.navigateBack({});
			},
			//忘记密码
			forgetpwd:function(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.forgetPwd
				})
			},
			//注册
			reg:function(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.reg
				})
			},
			//调到首页
			goHome:function(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			//登录
			async login() {
				let _this = this;
				uni.showLoading({
					title: '登录中...'
				});
				var reqdata = {
					account: this.mobile,
					password: this.password
				};
				let data = await this.$apis.postLogin(reqdata);
				let userinfo = data.userinfo;
				console.log(userinfo);
				let token = userinfo.token;
				this.$store.commit("SET_USERINFO", userinfo);
				this.$store.commit("SET_TOKEN", token);
				
				uni.hideLoading();
				//跳转到我的页面
				this.goHome();
				
			},
		},
	}
</script>
<style>
	page {
		background-color: #F6F7F8;
		background-image: url(../../static/img/common/bj.png);
	}

	.help-bg {
	}

	.help-body {
		width: 680rpx;
		left: 35rpx;
		top: 250rpx;
		position: absolute;
		z-index: 1;
	}

	.grace-grids {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 0;
	}

	.grace-grids-items {
		width: 160rpx;
	}
	.grace-pnper{width:168rpx; flex-shrink:0;}
	.grace-form-label{width:168rpx;}
	.grace-form-input{text-align:left;}
	.grace-form-item{padding:10rpx 0;}
	.grace-login-three-items{display:block; width:88rpx; height:88rpx; line-height:88rpx; font-size:60rpx; color:#3688FF; text-align:center; margin:10rpx;}
</style>
